<template>
  <div class="time-line">
    <div class="title">Timeline</div>
    <el-timeline>
      <el-timeline-item
        v-for="(activity, index) in activities"
        :key="index"
        :color="activity.color"
      >
        <div class="content">
          <div class="label">{{ activity.label }}</div>
          <div class="time">{{ activity.time }}</div>
        </div>
      </el-timeline-item>
    </el-timeline>
    <img src="@/assets/images/pc_main_time.png" alt="" class="img">
    <div class="info">
      Our focus is link east-west markets and to nurture and highlight groundbreaking ideas in this expansive world of Web3 infrastructure and dApps layers by setting the stage for ideas that can redefine the blockchain landscape. With two main event themes — <span>Infrastructure</span> and <span>Web3 DApps</span> — developers are invited to address the pressing challenges and needs of the modern blockchain ecosystem. With a grand prize pool of 60,000 $USDT, we are calling upon builders and designers to collaborate, push boundaries, craft projects.and transform ideas into reality. 
      <br>
      <br>
      Proudly supported by leading Web3 companies and communities from various countries in Asia, we are thrilled to announce the partnership with top enterprises and communities such as Coin98 from Vietnam, Hashed from South Korea, YGG from the Philippines, and HashKey and Animoca Ventures from Hong Kong. Additionally, we have esteemed mentors from global technology pioneers like Orderly Network, Layerzero Labs, Starknet, Scroll and Aptos. Our team of experts will be on hand to offer mentorship, guidance, and valuable insights to help participants shape their projects.
    </div>
    <div class="price">Total Prize</div>
    <img src="@/assets/images/pc_main_price.png" alt="" class="price-img">
    <div class="price-info">At the conclusion of the hackathon powered by C² Ventures , participants will have the opportunity to present their projects to a panel of expert judges and industry leaders at Web3 Connect Conference on Sept 15th at Fullerton Hotel Singapore. Winning teams will receive recognition, valuable prizes, and potential opportunities for investments. </div>
    <img src="@/assets/images/pc_border.png" alt="" class="price-border-pc">
    <img src="@/assets/images/m_border.png" alt="" class="price-border-m">
  </div>
</template>

<script setup>
const activities = [
  {
    label: 'Opening',
    time: 'August 21,2023',
    color: '#5CD848'
  },
  {
    label: 'Registration',
    time: 'August 21, 2023 - September 10, 2023, Online',
    color: '#5CD848'
  },
  {
    label: 'Hackathon Preliminary Judging',
    time: 'September 11, 2023 - September 14, 2023, Online'
  },
  {
    label: 'Demo Day (Presenting & Final Judging)',
    time: 'September 15, 2023, Onsite at Web3 Connect Conference'
  },
  {
    label: 'Awards Ceremony',
    time: 'September 15, 2023, Onsite at Web3 Connect Summit'
  }
]
</script>

<style lang="scss" scoped>
  .time-line{
    margin-top: 80px;
    .title{
      color: #5CD848;
      font-size: 50px;
      font-family: poppins-bold;
      padding-bottom: 60px;
    }
    .el-timeline{
      padding-left: 0;
    }
    .content{
      display: flex;
      justify-content: space-between;
      position: relative;
      top: -5px;
      .label{
        color: #D5D5D5;
        font-size: 22px;
      }
      .time{
        color: #fff;
        font-size: 22px;
        font-family: PingFangSC-Semibold;
      }
    }
    :deep(.el-timeline-item:nth-child(1) .el-timeline-item__tail){
      border-color: #5CD848;
    }
    .img{
      width: 100%;
      margin-top: 80px;
    }
    .info{
      margin-top: 50px;
      font-size: 20px;
      line-height: 44px;
      color: #D5D5D5;
      padding: 0 5px;
      span{
        color: #fff;
        font-family: 'poppins-semibold';
      }
    }
    .price{
      color: #5CD848;
      font-size: 50px;
      line-height: 60px;
      font-family: poppins-bold;
      margin-top: 100px;
    }
    .price-img{
      width: 754px;
      margin-top: 60px;
    }
    .price-info{
      font-size: 20px;
      line-height: 44px;
      margin-top: 30px;
      color: #D5D5D5;
    }
    .price-border-pc{
      // height: 0px;
      width: 1616px;
      // border-top: 1px dashed #fff;
      margin: 100px -218px;
    }
    .price-border-m{
      display: none;
    }
  }
  @media screen and (max-width: 1180px) {
    .time-line{
      margin-top: 50px;
      .title{
        font-size: 22px;
        line-height: 26px;
      }
      .content{
        flex-direction: column;
        .label{
          font-size: 14px;
        }
        .time{
          font-size: 14px;
          color: #D5D5D5;
        }
      }
      .img{
        width: 100%;
        margin-top: 40px;
      }
      .info{
        font-size: 14px;
        line-height: 28px;
        margin-top: 30px;
      }
      .price{
        font-size: 22px;
        line-height: 26px;
        margin-top: 50px;
      }
      .price-img{
        width: 270px;
        margin-top: 25px;
      }
      .price-info{
        margin-top: 20px;
        font-size: 14px;
        line-height: 28px;
      }
      .price-border-pc{
        display: none;
      }
      .price-border-m{
        display: block;
        width: 327px;
        margin: 50px auto;
        // height: 0px;
        // width: 100%;
        // border-top: 1px dashed #fff;
        // margin: 50px auto;
      }
    }
  }
</style>